<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商品管理</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div th:replace="~{nav :: nav('类别管理')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='类别管理', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>
            <el-container>
                <el-row>
                    <el-col :span="16" >
                        <el-card class="box-card" style="width:550px">
                            <el-main>
                                <el-table
                                        :data="tableData"
                                        border
                                        style="width: 100%; min-height: 500px" >
                                    <el-table-column type="expand">
                                        <template slot-scope="tableData">
                                            <el-form label-position="left" inline class="demo-table-expand">
                                                <el-form-item label="类别ID"><span>{{ tableData.row.categoryId }}</span>
                                                </el-form-item>
                                                <el-form-item>
                                                    <template slot-scope="scope">
                                                        <el-button type="text" @click="handleUpdate(tableData.row.categoryId)" size="small">修改 </el-button>
                                                    </template>
                                                </el-form-item>
                                            </el-form>

                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column
                                             prop="categoryId"
                                             label="类别ID"
                                             width="80">
                                     </el-table-column>-->


                                    <el-table-column
                                            prop="categoryName"
                                            label="类别名称"
                                            width="140">
                                    </el-table-column>
                                    <el-table-column
                                            prop="categoryOrder"
                                            label="类别排序"
                                            width="60"
                                    >
                                    </el-table-column>

                                    <el-table-column
                                            prop="categoryStatus"
                                            label="类别状态"
                                            width="60"
                                    >
                                    </el-table-column>
                                    <el-table-column

                                            label="排序"
                                            width="60">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="downdateOrder(scope.row.categoryId)"  size="small" >-</el-button>
                                            <el-button type="text" @click="updateOrder(scope.row.categoryId)"  size="small" >+</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            label="操作"
                                            width="120">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="handleUpdate(scope.row.categoryId)" size="small">修改 </el-button>
                                            <el-button type="text" @click="handleDrop(scope.row.categoryId)" size="small">作废 </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>



                                <!--<div style="display: none">-->
                                    <!--<el-dialog title="类别管理" :visible.sync="dialogTableVisible">-->
                                        <!--<div id="subOutputRank-print" style="border: 1px solid gainsboro">-->
                                            <!--<from style="border: 1px solid gainsboro;border-right: none;border-left: none;cellspacing:0;cellpadding:0;">-->
                                                <!--<div>-->
                                                    <!--<span>类别Id</span>-->
                                                    <!--<input value="" disabled>-->
                                                <!--</div>-->
                                                <!--<div>-->
                                                    <!--<span>类别名称</span>-->
                                                    <!--<input>-->
                                                <!--</div>-->
                                                <!--<div>-->
                                                    <!--<span>类别编号</span>-->
                                                    <!--<input>-->
                                                <!--</div>-->
                                                <!--<div>-->
                                                    <!--<span>类别状态</span>-->
                                                    <!--<input>-->
                                                <!--</div>-->
                                                <!--<button type="submit"></button>-->
                                            <!--</from>-->
                                        <!--</div>-->
                                    <!--</el-dialog>-->
                                <!--</div>-->

                                <el-dialog title="修改类别" :visible.sync="dialogTableVisible">
                                    <el-card class="box-card" style="width:400px">
                                        <div slot="header" class="clearfix">
                                            <span>类别信息</span>
                                        </div>
                                        <el-main>
                                            <el-form  label-width="100px" >
                                                <el-form-item label="类别编号">
                                                    <el-input v-model="category2.categoryId"  disabled></el-input>
                                                </el-form-item>
                                                <el-form-item label="类别名称">
                                                    <el-input v-model="category2.categoryName"></el-input>
                                                </el-form-item>
                                                <el-form-item label="类别排序">
                                                    <el-input v-model="category2.categoryOrder"></el-input>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="updateCommit">修改确认</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </el-main>
                                    </el-card>
                                </el-dialog>

                                <!-- <el-pagination
                                         background
                                         @current-change="handleCurrentChange"
                                         :current-page.sync="pageNum"
                                         :page-size="100"
                                         layout="total, prev, pager, next"
                                         :total="total">
                                 </el-pagination>-->

                            </el-main>
                        </el-card>
                    </el-col>
                    <el-col :span="2" >
                        &nbsp;
                    </el-col>
                    <el-col :span="6" >
                        <el-card class="box-card" style="width:400px">
                            <div slot="header" class="clearfix">
                                <span>类别信息</span>
                            </div>
                            <el-main>
                                <el-form  label-width="80px" >
                                    <el-form-item label="类别名称">
                                        <el-input v-model="category.categoryName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="类别排序">
                                        <el-input v-model="category.categoryOrder"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">立即添加</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-card>
                    </el-col>
                </el-row>

            </el-container>

        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('订单管理')}"></div>
<div th:replace="~{header :: vue}"></div>
<script>

    var vue =new Vue({
        el: '#page-content',
        data:{
            dialogTableVisible:false,
            tableData: '',
            pageNum:1,
            pageSize:8,
            total:0,
            web_static_server:_global_web_server+"/static/",
            category:{
                categoryName:'',
                categoryOrder:1,
                categoryStatus:1
            },
            category2:{
                categoryName:'',
                categoryOrder:1,
                categoryStatus:1
            }
        },
        methods:{
            init:function () {
                var url=_global_web_server +"/category/qryList";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    //var  pageInfo =jsonResult.data;
                    _self.tableData=jsonResult.data;
                    //_self.total=pageInfo.total;
                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();
            },
            handleDrop:function (id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function(){
                    var url=_global_web_server +"/category/delById";
                    var _self=this;
                    axios.get(url,{
                        params:{
                            categoryId:id
                        }
                    }).then(function (response) {
                        var  jsonResult=response.data;
                        if(jsonResult.status=="200"){
                            window.location.reload();
                        }else{
                            alert(jsonResult.message);
                        }
                    }).catch(function (reason) {
                        alert("请求异常");
                    });
                }).catch(function() {

                });
            },
            onSubmit:function () {
                var _self=this;
                var url=_global_web_server +"/category/add";
                axios.get(url,{
                    params:{
                        categoryName:_self.category.categoryName,
                        categoryOrder:_self.category.categoryOrder,
                        categoryStatus:1
                    }
                }).then(function (response) {
                    var self =this;
                    var  jsonResult=response.data;
                    if (jsonResult.status == 200){
                        window.location.reload();
                    }else{
                        _self.$notify({
                            title:'提示',
                            message:jsonResult.message,
                            type: 'error'
                        });
                    }
                }).catch(function (reason) {
                    var self =this;
                    _self.$notify({
                        title:'提示',
                        message:"出错了,排序必须是数值哦或其他异常",
                        type: 'error'
                    });
                });
            },
            updateOrder:function (id) {
                    var url=_global_web_server +"/category/updateById";
                    var _self=this;
                    axios.get(url,{
                        params:{
                            categoryId:id
                        }
                    }).then(function (response) {
                        var  jsonResult=response.data;
                        if(jsonResult.status=="200"){
                           //修改界面集合数据
                            _self.tableData.forEach(function (item) {
                                if(item.categoryId==id){
                                    item.categoryOrder+=1;
                                }
                            });
                            //排序
                            _self.tableData.sort(function (a,b) {
                                return  a.categoryOrder-b.categoryOrder;
                            });
                        }else{
                            alert(jsonResult.message);
                        }

                    }).catch(function (reason) {
                        alert("请求异常");
                    });
            },

            handleUpdate:function (id) {

                var url=_global_web_server +"/category/selectById";
                var _self=this;
                axios.get(url,{
                    params:{
                        categoryId:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status=="200"){
                        //修改界面集合数据
                        _self.dialogTableVisible=true;
                        _self.category2=jsonResult.data;


                    }else{
                        alert(jsonResult.message);
                    }

                }).catch(function (reason) {
                    alert("请求异常");
                });

            },

            updateCommit:function (id) {

                var _self=this;
                var url=_global_web_server +"/category/update";
                axios.get(url,{
                    params:{
                        categoryId:_self.category2.categoryId,
                        categoryName:_self.category2.categoryName,
                        categoryOrder:_self.category2.categoryOrder,
                        categoryStatus:1
                    }
                }).then(function (response) {
                    var self =this;
                    var  jsonResult=response.data;
                    if (jsonResult.status == 200){
                       // window.location.reload();
                        _self.$notify({
                            title:'提示',
                            message:"已经修改，下次刷新有效",
                            type: 'success'
                        });

                        _self.dialogTableVisible=false;


                    }else{
                        _self.$notify({
                            title:'提示',
                            message:jsonResult.message,
                            type: 'error'
                        });
                    }
                }).catch(function (reason) {
                    var self =this;
                    _self.$notify({
                        title:'提示',
                        message:"出错了,排序必须是数值哦或其他异常",
                        type: 'error'
                    });
                });




            },
              downdateOrder:function (id) {
                var url=_global_web_server +"/category/downdateById";
                var _self=this;
                axios.get(url,{
                    params:{
                        categoryId:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status=="200"){
                        //修改界面集合数据
                        _self.tableData.forEach(function (item) {
                            if(item.categoryId==id){
                                item.categoryOrder-=1;
                            }
                        });
                        //排序
                        _self.tableData.sort(function (a,b) {
                            return  a.categoryOrder-b.categoryOrder;
                        });
                    }else{
                        alert(jsonResult.message);
                    }

                }).catch(function (reason) {
                    alert("请求异常");
                });
            },
        }
    });
    vue.init();


</script>

</body>

</html>